<template>
  <div>
    <div v-if="dataList.length < 1" class="p-5 text-center text-muted border rounded bg-light">
      暂无附件
    </div>
    <ul class="task-ul">
      <span v-for="(item, index) of dataList" class="attach-item-span" :key="index">
        <div class="attach-item-wrap" :key="index">
          <li @click="handlePreview(index)">
            <img :src="item.src" />
          </li>
          <div class="attach-item-label badge badge-bill badge-success" v-if="item.name">
            <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
              <span>{{ item.name }}</span>
            </el-tooltip>
          </div>
          <!--<el-tooltip class="item" effect="dark" :content="item.time" placement="top">-->
          <!--<span class=" attach-item-time badge" >{{item.time}}</span>-->
          <!--</el-tooltip>-->
        </div>
        <span class="badge" style="margin-left: 60px; color: black">{{ item.time }}</span>
      </span>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {}
  },
  methods: {
    handlePreview(index) {
      this.$utils.viewer({
        images: this.dataList,
        index,
      })
    },
  },
}
</script>

<style scoped>
.task-ul li {
  z-index: 2;
  width: 160px;
  height: 120px;
  list-style: none;
  border-radius: 3px;
  cursor: pointer;
}

.task-ul li img {
  width: 100%;
  height: 100%;
}

.task-ul {
  display: flex;
  flex-wrap: wrap;
}

.attach-item-wrap {
  overflow: hidden;
  position: relative;
  width: 160px;
  height: 120px;
  border-radius: 4px;
  margin: 10px;
  border: 2px solid #ccc;
}

.attach-item-label {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 0.5rem 0.85rem;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-item-time {
  position: absolute;
  top: 95px;
  color: black;
  left: 80px;
  font-weight: 800;
  padding: 0.5rem 0.85rem;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
